<template>
    <section>
        <DetailsHeader title="机主政策" class="mb-24" :showBack="false" />

        <div class="card">
            <div class="card-header" style="margin-bottom:12px;">
                <span class="card-title">代金券福利</span>
            </div>

            <div class="card-content">
                <div class="card-item">
                    <span class="item-label">代金券补贴比例</span>
                    <span class="item-txt">{{ policyInfo.voucherDiscount ? policyInfo.voucherDiscount * 100 + '%' : 0
                    }}</span>
                </div>
                <div class="card-item">
                    <span class="item-label">代金券消耗总额</span>
                    <span class="item-txt">{{ policyInfo.voucherAmount }} 元</span>
                </div>
                <div class="card-item">
                    <span class="item-label">代金券补贴总额</span>
                    <span class="item-txt">{{ policyInfo.providerVoucherAmount }} 元</span>
                </div>
            </div>

            <div>
                <a-range-picker :value="date" />
            </div>

            <div class="card-charts" style="height:300px;">
                <div id="charts" ref="charts" style="width:100%;height:100%;"></div>
            </div>
        </div>

    </section>
</template>

<script setup name="Machine">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getProviderPolicyApi } from '@/api/modules/api.owner'
import dayjs from 'dayjs';

const date = ref([])
date.value = [dayjs().subtract(30, 'day'), dayjs()]
// 获取列表
const policyInfo = ref({})
const getProviderPolicy = async () => {
    const params = {
        startDate: dayjs(date.value[0]).format('YYYY-MM-DD') || undefined,
        endDate: dayjs(date.value[1]).format('YYYY-MM-DD') || undefined
    }
    const res = await getProviderPolicyApi(params)
    if (res.code != 0) {
        return
    }

    policyInfo.value = res.data
    const moneyX = res.data.moneyX || []
    policyInfo.value.moneyX = moneyX.map(item => {
        return dayjs(item).format('YYYY-MM-DD')
    })

    policyInfo.value.moneyY = res.data.moneyY || []
};

// getProviderPolicy()

// 初始化表格
let myChart = null
const charts = ref()
function init() {
    myChart = echarts.init(charts.value);
    let option = {
        color: ['#4DCB73'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: 50,
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: policyInfo.value.moneyX
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(77, 203, 115, 0.40)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(77, 203, 115, 0.00)'
                        }
                    ])
                },
                data: policyInfo.value.moneyY
            },
        ]
    };

    option && myChart.setOption(option);
}

/**
 * 页面初始化
 */
onMounted(async () => {
    await getProviderPolicy()
    init()
});

</script>

<style scoped lang="scss">
.card {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 4px 4px 0px #E7EDF8;

    .card-content {

        .card-item {
            margin-bottom: 24px;
        }

        .item-label {
            color: #8A93A7;
            text-align: right;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-right: 24px;
        }

        .item-txt {
            color: #223354;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
        }
    }
}
</style>
